<template>
	<view>
		<view class="top-box">
			<!-- 自定义导航栏 -->
			<view :style="'height:' + statusBarHeight + 'px'"/>
			<view class="navTopBox" :style="'height:' + navBarHeight + 'px'">
				<view class="left-button-box" :style="'height:' + menuButtonInfo.height + 'px;margin-top:'+(menuButtonInfo.top - statusBarHeight)+'px'">
					<image @click="tapToBack('back')" src="../../static/mine/w-back.png" mode="aspectFill"></image>
					<view class="line"></view>
					<image src="../../static/mine/w-home.png" mode="aspectFill" @click="tapToBack('index')"></image>
				</view>
				
				<view :style="'line-height:'+ navBarHeight + 'px;'" class="pageTitle">{{title}}</view>
			</view>
		</view>
		
		<view :style="'height:' + (statusBarHeight + navBarHeight) + 'px'"></view>
		
		<view class="container" :style="'background-image:url('+ mineInfo.avatar +');'"></view>
		<view class="qrcode-box">
			<view class="qr-mine">
				<image class="avatar" :src="mineInfo.avatar" mode="aspectFill"></image>
				<view class="nickname">{{mineInfo.nick_name}}</view>			
				<view class="tips">加入下楼休闲吧 随时随地开启运动新生活</view>
			</view>
			
			<!-- 二维码生成 -->
			<view class="qrcode">
				<tki-qrcode cid="OrderQrcode" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view>
			<!--  -->
			<view class="qr-tip">二维码长期有效，新用户扫码开通会员可获得100元现金奖励</view>
		</view>
	</view>
</template>

<script>
	import topnav from '@/components/top-nav/top-nav.vue';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	var app = getApp();
	export default {
		data() {
			return {
				title:'我的二维码',
				mineInfo:{},
				
				statusBarHeight : app.globalData.statusBarHeight,
				navBarHeight : app.globalData.navBarHeight,
				menuButtonInfo : app.globalData.menuButtonInfo,
				
				val: '', // 要生成的二维码值
				size: 220, // 二维码大小
				unit: 'px', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '../../static/logo.png', // 二维码图标
				iconsize: 50, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			};
		},
		components: {
			tkiQrcode,
			topnav
		},
		
		onShow(){
			console.log('onshow')
			this.getUserInfo();
		},
		methods:{
			// 生成二维码
			qrR(res) {
				this.src = res;
			},
			getUserInfo() {
				let that = this;
				// #ifdef MP-WEIXIN
						const VERSION = __wxConfig.envVersion;
						let api = VERSION=='release'?'https://p.ynz666.com/':'https://test.p.ynz666.com/';
				// #endif
				// #ifdef MP-TOUTIAO
					const VERSION = process.env.NODE_ENV;
					let api = VERSION!=='development'?'https://p.ynz666.com/':'https://p.ynz666.com/';
				// #endif
				app.getUserInfo(function(lRes){
					that.mineInfo = lRes;
					that.val = api+'?id='+ lRes.id; // 二维码内容
					that.mineInfo.isBuyVip = false;
					uni.setStorageSync('mineInfo',lRes);
				})
			},
			// 返回按钮
			tapToBack(page) {
				switch(page){
					case 'index':
						uni.switchTab({
							url:'/pages/index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'../mine/mine'
								})
							}
						})
					break;
				}
			},
		}
	}
</script>

<style lang="scss">
.container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;top: 0;
	filter: blur(25px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 0;
}
.top-box {
	position: fixed;
	top: 0;left: 0;
	background-color: transparent;
	width: 100vw;
	z-index: 10;
}
.navTopBox {
	display: flex;
	position: relative;
	
	.pageTitle {
		width: 300rpx;
		position: absolute;left: 50%;
		margin-left: -150rpx;
		text-align: center;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;//文字上限行
		-webkit-box-orient: vertical;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}
	.left-button-box {
		width: 150rpx;
		background-color: rgba(255,255,255,.2);
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
		border: 1rpx solid rgba(224, 224, 224, 0.5);
		
		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin: 20rpx;
		}
	}
}

.qrcode-box {
	text-align: center;
	width: 670rpx;
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	
	position: fixed;
	top: 50%;left: 50%;
	margin-top: -370rpx;margin-left: -335rpx;
}
.qr-mine {
	.avatar {
		width: 180rpx;
		height: 180rpx;
		margin-top: -90rpx;
		border-radius: 50%;
	}
	.nickname{
		font-size: 36rpx;
		font-weight: bolder;
		color: #333333;
		line-height: 50rpx;
		margin: 20rpx 0 7rpx 0;
	}
	.tips{
		font-size: 24rpx;
		color: #999999;
		line-height: 33rpx;
	}
}
.qrcode {
	margin: 60rpx 0 24rpx 0;
}
.qr-tip {
	margin: 24rpx auto;
	width: 388rpx;
	font-size: 26rpx;
	color: #333333;
	line-height: 37rpx;
}
</style>
